@import "mixins";
@import "variables";

.navbar {
    &.navbar-left {
        display: block;
        width: 3rem;
        height: 100%;
        padding: .5rem 0;
        overflow-x: hidden;
        overflow-y: auto;
        transition: width ease-in-out .2s;

        &.active, &:hover {
            width: 200px;
        }

        a:hover {
            text-decoration: none;
        }

        .nav-item {
            position: relative;
            white-space: nowrap;

            i {
                width: 1.5rem;
                font-size: 1rem;
                margin: 0 .75rem;
                text-align: center;
            }

            a {
                color: $blue;

                &:hover {
                    background: lighten($gray-800, 5%);
                    color: $blue;
                }

                i {
                    color: $gray-500;
                }
            }

            .navbar-text {
                display: block;
            }

            &.nav-header {
                display: block;
                font-family: "Open Sans", sans-serif;
                font-size: 1rem;
                font-weight: 300;
                border-top: solid 1px rgba(255,255,255,.2);

                i {
                    color: $yellow;
                }

                span, a {
                    color: $white;
                }
            }

            &.active {
                a {
                    background: lighten($gray-800, 5%);
                    color: $blue;

                    &:after {
                        @include arrow-left($body-bg, .4rem, -.4rem);
                    }

                    i {
                        color: $white;
                    }
                }
            }
        }
    }
}